<span page-title ng-model="version">{{ "Remove Version" | translate }} {{ version.version }}</span>

<section>
  <h3 translate>Content Hosts using Version {{ version.version }}</h3>

  <p translate>
    The Content Hosts listed below are currently using this Content View Version.  Before removing the version you must move these Content Hosts to an environment where this version is not in use.
  </p>

  <p translate>
    If you would prefer to move portions of these Content Hosts to different content views or environments click <a href="{{ contentHostsLink() }}">here</a>  to manage these Content Hosts in bulk.
  </p>

  <div>

    <p translate>
      Please select a Lifecycle Environment and Content View to move these Content Hosts to:
    </p>

    <div path-selector="environments"
         ng-model="selectedEnvironment"
         mode="singleSelect"></div>

    <div class="row">
      <div class="col-sm-4">
        <span translate>Content View:</span>
        <select class="form-control"
                ng-show="!fetchingViews && selectedEnvironment && contentViewsForEnvironment.length > 0"
                ng-options="cv.id as cv.name for cv in contentViewsForEnvironment"
                ng-model="selectedContentViewId">
        </select>
        <i ng-show="fetchingViews" class="fa fa-spinner fa-spin"></i>
        <span translate ng-hide="selectedEnvironment">
          Please select an environment.
        </span>
        <span translate ng-show="!fetchingViews && selectedEnvironment && contentViewsForEnvironment.length === 0">
          No Content Views available, please select another environment.
        </span>
      </div>
    </div>
  </div>

  <a ng-click="toggleHosts()">
    <p ng-show="!showHosts" translate>Show affected Content Hosts</p>
    <p ng-show="showHosts" translate>Hide affected Content Hosts</p>
  </a>

  <div ng-show="showHosts">
    <div data-extend-template="layouts/partials/table.html">
      <h5 translate>Affected Content Hosts</h5>


      <table data-block="table"  class="table table-striped table-bordered">
        <thead>
          <tr bst-table-head>
            <th bst-table-column="name"><span translate>Name</span></th>
            <th bst-table-column="name"><span translate>Lifecycle Environment</span></th>
          </tr>
        </thead>

        <tbody>
          <tr bst-table-row ng-repeat="host in table.rows">
            <td bst-table-cell>
                {{ host.name }}
            </td>
            <td bst-table-cell>
                {{ host.content_facet_attributes.lifecycle_environment_name }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="pull-right">
    <a ui-sref="content-view.versions({contentViewId: contentView.id})" >
      <button type="button" class="btn btn-default" translate>
        Cancel
      </button>
    </a>
    <button type="button" class="btn btn-default" ng-click="transitionBack()" translate>
      Back
    </button>
    <button type="button" class="btn btn-primary" ng-click="processSelection()" ng-disabled="selectedContentViewId === undefined" translate>
      Next
    </button>
  </div>
</section>
